<template>
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索框页面 -->
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchForm>

    <!-- 展示列表页面 
    定义属性和方法
    -->
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      :dataLoading="dataLoading"
      @onPageChange="onPageChange"
    ></TableList>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { getProjectList } from '@/api/serve'
//引入列表页组件
import TableList from './components/TableList.vue'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'

const data = ref([])
const total = ref(0)
const dataLoading = ref(false) // 加载中

const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageSize: 10,
    pageNum: 1
  }
  //重新查询列表
  getList()
}
//搜索按钮
const handleSearch = () => {
  getList()
}
//清空按钮
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}
</script>
